<template>
    <div id="map_up" style="width: 600px; height: 400px;">地图</div>
</template>

<script setup>
 import { onMounted, defineProps, watch, nextTick } from 'vue';
  import * as echarts from 'echarts';
  // 定义 props，接收父组件传递的数据
  const props = defineProps({
    childData3: Array
  });
  let myChart = null; // 存储 ECharts 实例
// 绘制左侧面
  const initECharts = () => {
    const echartsContainer = document.getElementById("map_up");
    if (myChart) {
      // 如果已经存在 ECharts 实例，则先销毁它
      myChart.dispose();
    }
    // 初始化 ECharts 实例
    myChart = echarts.init(echartsContainer);
    // 检查childData1是否已定义
    if (!props.childData3 || props.childData3.length === 0) {
      console.warn('childData1 is not ready yet.');
      return; // 如果数据未准备好，直接返回不执行后续逻辑
    }
    const automobile = [];
    const start_sales = [];
    const end_sales = [];
    props.childData3.forEach(item => {
        automobile.push(item.automobile);
        start_sales.push(item.start_date);
        end_sales.push(item.end_date);
    });
    console.log(start_sales)
    const option = {
    backgroundColor: '',
    tooltip: {
        trigger: 'axis',
        backgroundColor:'rgba(255,255,255,0.2)',
        axisPointer: {
            type: 'shadow',
            label: {
                show: true,
                backgroundColor: '#3259B8'
            }
        }
    },
    legend: {
        data: ['起始月份', '终止月份',],
        textStyle: {
            color: '#ccc'
        }
    },
    xAxis: {
        data: automobile,
        axisLine: {
            lineStyle: {
                color: '#ccc'
            }
        }
    },
    yAxis: [{
        name:'销售量',
        splitLine: {show: false},
        axisLine: {
            lineStyle: {
                color: '#ccc',
            }
        },
        axisLabel:{
            formatter:'{value} Ha',
        }
    },
        ],
        dataZoom: [{
        type: 'slider',
        show: true,
        xAxisIndex: [0, 1, 2, 3],
        start: 50,
        end: 100
      }, {
        type: 'inside',
        xAxisIndex: [0, 1, 2, 3]
      }],
    series: [
    {
        name: '起始月份销售量',
        type: 'bar',
        barWidth: 10,
        itemStyle: {
            normal: {
                barBorderRadius: 10,
                color: new echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                        {offset: 0, color: '#956FD4'},
                        {offset: 1, color: '#3EACE5'}
                    ]
                )
            }
        },
        data: start_sales
    }, 
    
    {
        name: '终止月份销售量',
        type: 'bar',
        barGap: '-100%',
        barWidth: 10,
        itemStyle: {
            normal: {
                barBorderRadius: 10,
                color: new echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                        {offset: 0, color: 'rgba(156,107,211,0.5)'},
                        {offset: 0.2, color: 'rgba(156,107,211,0.3)'},
                        {offset: 1, color: 'rgba(156,107,211,0)'}
                    ]
                )
            }
        },
        z: -12,
        
        data: end_sales
    }, 
   ]
};

    myChart.setOption(option);
  };
  
  // 修改onMounted钩子
  onMounted(async () => {
    await nextTick(); // 等待DOM更新
    initECharts();
  });
  
  // 修改watcher回调，添加async并使用nextTick
  watch(() => props.childData3, async () => {
    await nextTick(); // 等待DOM更新
    initECharts();
  }, { immediate: true });
  
</script>
